<template>
    <el-main style="padding:0 20px;">
        <el-form :model="form" :rules="rules" ref="dialogForm" label-width="100px" label-position="right">
            <el-form-item label="活动类型" prop="type">
                <el-radio-group v-model="form.type">
                    <el-radio :label="1">普通活动</el-radio>
                    <el-radio :label="2">机构活动</el-radio>
                </el-radio-group>
            </el-form-item>
            <el-form-item label="活动状态" prop="status">
                <el-radio-group v-model="form.status">
                    <el-radio :label="0">已取消</el-radio>
                    <el-radio :label="1">即将开始</el-radio>
                    <el-radio :label="2">进行中</el-radio>
                    <el-radio :label="3">已结束</el-radio>
                </el-radio-group>
            </el-form-item>
            <el-form-item label="活动名称" prop="name">
                <el-input v-model="form.name" clearable></el-input>
            </el-form-item>
            <el-form-item label="机构名称" prop="institution_name" v-if="form.type == 2">
                <el-input v-model="form.institution_name" clearable></el-input>
            </el-form-item>
            <el-form-item label="图片" prop="thumb">
                <sc-upload v-model="form.thumb" draggable :limit="5" tip="请上传图像格式文件"></sc-upload>
            </el-form-item>
            <el-form-item label="投票" prop="is_draw">
                <el-switch v-model="form.is_draw" inline-prompt active-text="是" inactive-text="否" :active-value="1"
                    :inactive-value="0" />
            </el-form-item>
            <el-form-item label="抽奖" prop="is_gitf">
                <el-switch v-model="form.is_gitf" inline-prompt active-text="是" inactive-text="否" :active-value="1"
                    :inactive-value="0" />
            </el-form-item>
            <el-form-item label="活动时间" prop="activity_time">
                <el-date-picker v-model="form.activity_time" type="datetimerange" range-separator="到"
                    start-placeholder="开始时间" end-placeholder="结束时间" value-format="YYYY-MM-DD HH::mm:ss" />
            </el-form-item>
            <el-form-item label="退款截止日期" prop="refund_date" v-if="form.type == 2">
                <el-date-picker v-model="form.refund_date" type="date" value-format="YYYY-MM-DD" placeholder="选择日期" />
            </el-form-item>
            <el-form-item label="邀请码" prop="invitation_code" v-if="form.type == 2">
                <el-input v-model="form.invitation_code" clearable></el-input>
            </el-form-item>
            <el-form-item label="报名费" prop="price">
                <el-input-number v-model="form.price" :min="0" :precision="2" clearable></el-input-number>
            </el-form-item>
            <el-form-item label="可报名数量" prop="max_num">
                <el-input-number v-model="form.max_num" :min="0" :precision="0" clearable></el-input-number>
                <div class="el-form-item-msg">最多可以报名的人数，默认0，表示不限制</div>
            </el-form-item>
            <el-row>
                <el-col :span="12">
                    <el-form-item label="经度" prop="longitude">
                        <el-input v-model="form.longitude" clearable></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="纬度" prop="latitude">
                        <el-input v-model="form.latitude" clearable></el-input>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-form-item label="活动地点" prop="address">
                <el-input v-model="form.address" clearable></el-input>
            </el-form-item>
            <!-- <el-form-item label="报名人数" prop="num">
                    <el-input-number v-model="form.num" :min="0" :precision="0" clearable></el-input-number>
                </el-form-item> -->
            <el-form-item label="围观人数" prop="hit">
                <el-input-number v-model="form.hit" :min="0" :precision="0" clearable></el-input-number>
            </el-form-item>
            <el-form-item label="活动详情" prop="content">
                <sc-editor v-model="form.content" placeholder="请输入" :height="400"></sc-editor>
            </el-form-item>
            <el-form-item label="活动须知" prop="instructions">
                <sc-editor v-model="form.instructions" placeholder="请输入" :height="400"></sc-editor>
            </el-form-item>
            <el-form-item>
                <el-button @click="$emit('closed')">取 消</el-button>
                <el-button type="primary" :loading="isSaveing" @click="submit()">保 存</el-button>
            </el-form-item>
        </el-form>

    </el-main>
</template>

<script>
import { defineAsyncComponent } from 'vue';
const scEditor = defineAsyncComponent(() => import('@/components/scEditor'));
export default {
    emits: ['success', 'closed'],
    components: {
        scEditor
    },
    data () {
        return {
            mode: "add",
            titleMap: {
                add: '新增活动',
                edit: '编辑活动',
            },
            isSaveing: false,
            //表单数据
            form: {
                type: 1,
                status: 0,
                name: "",
                thumb: "",
                max_num: 0,
                price: 0,
                hit: 0,
            },
            //验证规则
            rules: {
                name: [
                    { required: true, message: '请输入活动名称', trigger: 'change' }
                ],
                thumb: [
                    { required: true, message: '请上传活动图片' }
                ],
            }
        }
    },
    mounted () {

    },
    methods: {
        //表单提交方法
        submit () {
            this.$refs.dialogForm.validate(async (valid) => {
                if (valid) {
                    this.isSaveing = true;
                    await this.$API.app.activity.save.post(this.form)
                        .then(res => {
                            this.isSaveing = false;
                            if (res.code == 200) {
                                this.$emit('success')
                                this.visible = false
                                this.$message.success("操作成功")
                            } else {
                                this.$alert(res.message, "提示", { type: 'error' })
                            }
                        })
                        .catch(() => {
                            this.isSaveing = false;
                        });

                }
            })
        },
        //表单注入数据
        setData (data) {
            Object.assign(this.form, data)
            if (data.thumb) {
                this.form.thumb = 'https://xfyiyao.oss-cn-shenzhen.aliyuncs.com/' + data.thumb
                this.form.activity_time = [data.start_time, data.end_time]
            }
        }
    }
}
</script>

<style></style>
